<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3.使用Symbol解决字符串耦合问题</title>
</head>

<body>
  <script>

    let user1 = '李四'
    let user2 = '李四'

    let grade = {
      // 对象里面使用变量要使用中括号,否则会被当成字符串处理
      [user1]: { js: 100, css: 89 },
      [user2]: { js: 35, css: 55 }
    };
    // console.log(grade); //user1,user2不使用中括号时，会被当成字符串处理：{user1: {…}, user2: {…}}
    console.log(grade); //Object {李四: { js: 35, css: 55 } }重复的key会导致后面的元素覆盖前面的  


    // 可以使用 symbol 声明解决重复的问腿
    user1 = {
      name: '李四',
      key: Symbol()
    }
    user2 = {
      name: '李四',
      key: Symbol()
    }
    grade = {
      [user1.key]: { js: 100, css: 89 },
      [user2.key]: { js: 35, css: 55 }
    }
    console.log(grade); //{Symbol(): {…}, Symbol(): {…}}
     // Symbol(): { js: 100, css: 89 }
     // Symbol(): { js: 35, css: 55 }
     // [[Prototype]]: Object
    // 获得user2的成绩
    console.log(grade[user2.key]);//  console.log(grade);
  </script>
</body>

</html>